<!-- 待收货-订单详情 -->
<template>
    <div>
        <div style="background-color: #eae9e5; position: relative;">
            <div style=" width: 90%;height: 90px; position: absolute;background-color: white; z-index: 1; top: 115px;left: 18px;border-radius: 8px;box-shadow: 4px 4px 4px 2px rgba(0, 0, 0, 0.3);">
                <div style=" width: 46px;height: 46px;float: left; margin-top: 20px;margin-left: 10px; color: white; background-color: #c1ab96; border-radius: 50%;"><van-icon name="location" color="white" size="30" style="margin:8px 0px 0px 8px; border-radius: 50%;"/></div>
                <div style="width: 76%;height:80%; float: left;margin-top: 8px;margin-left: 10px;">
                    <div style=" font-size: 14px;margin-bottom: 4px;"><span>小二郎</span><span style=" margin-left: 10px;color: #a699b3;">86-18802155485</span></div>
                    <span>福建省厦门市翔安区某个镇某个村厦门市翔安区某个镇某个村69号{{$route.query.id}}</span>
                </div>
            </div>
            <van-config-provider :theme-vars="themeVars">
                <van-nav-bar
                title="订单详情"
                left-arrow
                :border="false"
                fixed="true"
                style=" background-color: #eae9e5;"
                @click-left="onClickLeft"
                />
                <div style="height: 46px;"></div>
                <div style=" height: 110px; background-color: #c1ab96; color: white; position: relative;"><van-icon style="color:white; margin-left: 20px; margin-top: 20px;" size="40" name="clock-o" color="white"/><span style="font-size: 22px;position: absolute; top: 26px;">快递投递中</span></div>
                <div style=" height: 64px; background-color: white"></div>
                <div style=" height: 80px; background-color: white">
                    <div style=" width: 46px;height: 46px;float: left; margin-top: 15px;margin-left: 26px;background-color: #c1ab96; border-radius: 50%;"><van-icon size="30" color="white" name="logistics" style="margin:8px 0px 0px 8px;"/></div>
                    <div style=" width: 240px;margin-left: 10px;margin-top: 10px; float: left; font-size: 12px; ">
                        <span style="color: #eacda3;">快递已送往【中国矿业大学南湖校区】东门快递柜，取件码【KX8790】,请持取件码取件。</span><br/><br/>
                        <span style="color: #eae9e5;">2019-07-12 09:06:07</span>
                    </div>
                    <div style="float: left; margin-top: 20px;margin-left: 6px;"><van-icon name="arrow" size="40" color="#eae9e5"/></div>
                </div>
                <div style="background-color: white; padding:20px; margin-top: 20px;">
                    <div style="margin-bottom: 8px;">
                        <span>{{OrderInformation.mingcheng}}</span>
                    </div>
                    <div style=" height: 80px;">
                        <img style=" float: left; width: 80px;height: 80px;border-radius: 6px; margin-right: 8px;" :src="OrderInformation.img" alt="图片丢失">
                        <div style=" float: left; width: 180px;">
                            <div>{{OrderInformation.name}}</div>
                            <span style="color: gray; display: block;">{{OrderInformation.yangse}}</span>
                            <van-tag type="warning">七天换货</van-tag>
                        </div>
                        <div style=" float: right; color: gray; right: 8px;">
                            <div>{{OrderInformation.age}}</div>
                            <div style=" float: right;">x{{OrderInformation.jiang}}</div>
                        </div>
                    </div>
                    <div style="color:gray;font-size: 14px; display: flex;justify-content: space-between;"><span>商品总价</span><span>￥{{OrderInformation.zongjia}}</span></div>
                    <div style="color:gray;font-size: 14px; display: flex;justify-content: space-between;"><span>运费（快递）</span><span>￥{{OrderInformation.yunfe}}</span></div>
                    <div style="display: flex;justify-content: space-between;"><span>订单总价</span><span>￥{{OrderInformation.zongjia+OrderInformation.yunfe}}</span></div>   
                </div>
                <div style=" margin-top: 20px; background-color: white; padding:20px;">
                    <div>订单信息</div>
                    <div style="color: grey; font-size: 14px; margin-top: 20px;">
                        <div style="margin: 10px 0px 10px 0px;"><span>订单编号：</span><span style="margin-left: 60px;">{{OrderInformation.bianhao}}</span></div>
                        <div style="margin: 10px 0px 10px 0px;"><span>支付宝交易号：</span><span style="margin-left: 31px;">{{OrderInformation.jyh}}</span></div>
                        <div style="margin: 10px 0px 10px 0px;"><span>创建时间：</span><span style="margin-left: 60px;">{{OrderInformation.cjsj}}</span></div>
                        <div style="margin: 10px 0px 10px 0px;"><span>成交时间：</span><span style="margin-left: 60px;">{{OrderInformation.chan}}</span></div>
                    </div>
                </div>
                <div style="height: 80px;"></div>
                <div style=" background-color: white; padding:20px; position: fixed; z-index: 999; bottom: 0; border-top: 2px solid #eae9e5;">
                    <van-button round plain color="#c3af98" size="small" style="padding: 0px 16px 0px 16px; margin-left: 150px; font-weight: bold; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);">联系卖家</van-button>
                    <van-button round plain color="#c3af98" size="small" style="padding: 0px 16px 0px 16px; margin-left: 16px; font-weight: bold; box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.1);">申请售后</van-button>
                </div>
            </van-config-provider>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted,reactive,ref} from "vue";
import {getorder} from '@/api/order.ts';
import { useRouter,useRoute } from "vue-router";
let OrderInformation = ref([]);
let icon = ref('passed');
const router =useRouter();
const route =useRoute();
const onClickLeft = () => history.back();
const themeVars = {
    NavBarIconColor:'#c1ab96'
};
onMounted(() => {
    getorder()
    .then(res=>{
            if(route.query.id){
                OrderInformation.value=res.data.data[route.query.id-1]
            }else{
                router.push('/')
            }
    })
});
</script>
<style>
    
</style>